//导入打包 HTML 的插件
let htmlWebpackPlugin = require('html-webpack-plugin')
//导入
const {
  resolve
} = require('path');
//暴露配置对象
module.exports = {
  //入口
  entry: './src/index.ts',
  //出口
  output: {
    //输出的文件夹 『必须是绝对路径』
    path: resolve(__dirname, './build'),
    //输出的文件名(子路径)
    filename: 'js/bundle-[content-hash].js',
    //清空
    clean: true
  },
  //加载器 loader
  module: {
    rules: [
      //配置 ts 的操作
      {
        test: /\.tsx?$/,
        use: 'ts-loader'
      },
      // 配置 less 的处理
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  },
  //完善文件名  import A from './A' // A.js  A.json
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },
  //插件
  plugins: [
    new htmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  //模式
  mode: 'development',
  //配置开发服务
  devServer: {
    port: 3001, //监听的端口
    open: true //自动打开浏览器
  }
}